import React, { useState } from 'react';
import { Card, Row, Col, Input, Tag, Empty } from 'antd';
import {RocketOutlined, ShoppingOutlined, VideoCameraOutlined, CodeOutlined, TeamOutlined, MailOutlined, CloudOutlined, BankOutlined, CameraOutlined, ToolOutlined, SearchOutlined} from '@ant-design/icons';
import './AppCenter.jsx.css';

const { Meta } = Card;
const { Search } = Input;

// 应用数据
const applications = [
    {
        id: 1,
        name: "项目管理",
        description: "高效管理团队任务与项目进度",
        category: "办公工具",
        icon: <RocketOutlined style={{ fontSize: '32px', color: '#1890ff' }} />,
        url: "https://www.example.com/project",
        color: "#1890ff"
    },
    {
        id: 2,
        name: "设计协作",
        description: "实时设计评审与协作平台",
        category: "创意设计",
        icon: <CameraOutlined style={{ fontSize: '32px', color: '#722ed1' }} />,
        url: "https://www.example.com/design",
        color: "#722ed1"
    },
    {
        id: 3,
        name: "代码托管",
        description: "安全可靠的代码托管与协作",
        category: "开发工具",
        icon: <CodeOutlined style={{ fontSize: '32px', color: '#13c2c2' }} />,
        url: "https://www.example.com/code",
        color: "#13c2c2"
    },
    {
        id: 4,
        name: "在线会议",
        description: "高清视频会议与屏幕共享",
        category: "沟通协作",
        icon: <TeamOutlined style={{ fontSize: '32px', color: '#fa541c' }} />,
        url: "https://www.example.com/meeting",
        color: "#fa541c"
    },
    {
        id: 5,
        name: "企业邮箱",
        description: "安全高效的企业级邮箱服务",
        category: "办公工具",
        icon: <MailOutlined style={{ fontSize: '32px', color: '#52c41a' }} />,
        url: "https://www.example.com/mail",
        color: "#52c41a"
    },
    {
        id: 6,
        name: "云存储",
        description: "安全可靠的云端文件存储",
        category: "云服务",
        icon: <CloudOutlined style={{ fontSize: '32px', color: '#faad14' }} />,
        url: "https://www.example.com/storage",
        color: "#faad14"
    },
    {
        id: 7,
        name: "财务系统",
        description: "企业级财务与报销管理",
        category: "企业管理",
        icon: <BankOutlined style={{ fontSize: '32px', color: '#f5222d' }} />,
        url: "https://www.example.com/finance",
        color: "#f5222d"
    },
    {
        id: 8,
        name: "电商平台",
        description: "一站式电商解决方案",
        category: "营销工具",
        icon: <ShoppingOutlined style={{ fontSize: '32px', color: '#eb2f96' }} />,
        url: "https://www.example.com/shop",
        color: "#eb2f96"
    },
    {
        id: 9,
        name: "视频制作",
        description: "专业的在线视频编辑工具",
        category: "创意设计",
        icon: <VideoCameraOutlined style={{ fontSize: '32px', color: '#2f54eb' }} />,
        url: "https://www.example.com/video",
        color: "#2f54eb"
    },
    {
        id: 10,
        name: "系统监控",
        description: "实时监控服务器与应用状态",
        category: "运维工具",
        icon: <ToolOutlined style={{ fontSize: '32px', color: '#fa8c16' }} />,
        url: "https://www.example.com/monitor",
        color: "#fa8c16"
    },
];

// 分类选项
const categories = [
    { id: 'all', name: '全部应用' },
    { id: '办公工具', name: '办公工具' },
    { id: '开发工具', name: '开发工具' },
    { id: '创意设计', name: '创意设计' },
    { id: '沟通协作', name: '沟通协作' },
    { id: '云服务', name: '云服务' },
    { id: '企业管理', name: '企业管理' },
];

const AppCenter = () => {
    const [selectedCategory, setSelectedCategory] = useState('all');
    const [searchText, setSearchText] = useState('');

    // 过滤应用
    const filteredApps = applications.filter(app => {
        const matchesCategory = selectedCategory === 'all' || app.category === selectedCategory;
        const matchesSearch = app.name.toLowerCase().includes(searchText.toLowerCase()) ||
            app.description.toLowerCase().includes(searchText.toLowerCase());
        return matchesCategory && matchesSearch;
    });

    // 处理应用点击
    const handleAppClick = (url) => {
        window.open(url, '_blank');
    };

    return (
        <div className="app-center-container">
            <div className="app-center-header">
                <h1 className="app-center-title">应用中心</h1>
                <p className="app-center-subtitle">高效工作，从这里开始</p>

                <div className="app-center-search">
                    <Search
                        placeholder="搜索应用..."
                        prefix={<SearchOutlined />}
                        allowClear
                        size="large"
                        style={{ width: '100%', maxWidth: '600px' }}
                        onChange={(e) => setSearchText(e.target.value)}
                    />
                </div>
            </div>

            <div className="app-center-categories">
                {categories.map(category => (
                    <Tag.CheckableTag
                        key={category.id}
                        checked={selectedCategory === category.id}
                        onChange={() => setSelectedCategory(category.id)}
                        className="category-tag"
                    >
                        {category.name}
                    </Tag.CheckableTag>
                ))}
            </div>

            <div className="app-center-content">
                {filteredApps.length > 0 ? (
                    <Row gutter={[24, 24]}>
                        {filteredApps.map(app => (
                            <Col xs={24} sm={12} md={8} lg={6} key={app.id}>
                                <Card
                                    hoverable
                                    className="app-card"
                                    onClick={() => handleAppClick(app.url)}
                                    style={{
                                        borderTop: `4px solid ${app.color}`,
                                        borderRadius: '8px',
                                        transition: 'all 0.3s'
                                    }}
                                >
                                    <div className="app-icon" style={{ backgroundColor: `${app.color}10` }}>
                                        {app.icon}
                                    </div>
                                    <Meta
                                        title={<div className="app-name">{app.name}</div>}
                                        description={<div className="app-description">{app.description}</div>}
                                    />
                                    <div className="app-category">
                                        <Tag color={app.color}>{app.category}</Tag>
                                    </div>
                                </Card>
                            </Col>
                        ))}
                    </Row>
                ) : (
                    <div className="app-center-empty">
                        <Empty
                            description={
                                <span>
                  没有找到匹配的应用
                </span>
                            }
                        />
                    </div>
                )}
            </div>

            <div className="app-center-footer">
                <p>© 2023 企业应用中心 | 已为您提供 {applications.length} 款优质应用</p>
            </div>
        </div>
    );
};

export default AppCenter;